<html>
<head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
html,body{
	width:100%;
	height:100%;
}
.panel {
	margin: 10px
}

.left {
	width: 30%;
	float: left;
}

.search-box {
	display: inline-block;
	width: 100%;
	border-radius: 3px;
	padding: 4px 15px 4px 15px;
	position: relative;
	background: #fff;
	border: 1px solid #ddd;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.search-box.hovered, .search-box:hover, .search-box:active {
	border: 1px solid #aaa;
}

.search-box input[type=text] {
	border: none;
	box-shadow: none;
	display: inline-block;
	padding: 0;
	background: transparent;
}

.search-box input[type=text]:hover, .search-box input[type=text]:focus,
	.search-box input[type=text]:active {
	box-shadow: none;
}

.search-box .search-btn {
	position: absolute;
	right: 2px;
	top: 2px;
	color: #aaa;
	border-radius: 3px;
	font-size: 21px;
	padding: 5px 10px 1px;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.search-box .search-btn:hover {
	color: #fff;
	background-color: #8FBE00;
}

.right {
	margin-left: 32%;
	float: left;
}

.debugPane{
	margin-left: 360px;
	display:none;
}

</style>
</head>

<body>


	<script type="text/javascript">
		//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外
		function forbidBackSpace(e) {
			var ev = e || window.event; //获取event对象 
			var obj = ev.target || ev.srcElement; //获取事件源 
			var t = obj.type || obj.getAttribute('type'); //获取事件源类型 
			//获取作为判断条件的事件类型 
			var vReadOnly = obj.readOnly;
			var vDisabled = obj.disabled;
			//处理undefined值情况 
			vReadOnly = (vReadOnly == undefined) ? false : vReadOnly;
			vDisabled = (vDisabled == undefined) ? true : vDisabled;
			//当敲Backspace键时，事件源类型为密码或单行、多行文本的， 
			//并且readOnly属性为true或disabled属性为true的，则退格键失效 
			var flag1 = ev.keyCode == 8
					&& (t == "password" || t == "text" || t == "textarea")
					&& (vReadOnly == true || vDisabled == true);
			//当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效 
			var flag2 = ev.keyCode == 8 && t != "password" && t != "text"
					&& t != "textarea";
			//判断 
			if (flag2 || flag1)
				return false;
		}
		//禁止后退键 作用于Firefox、Opera
		document.onkeypress = forbidBackSpace;
		//禁止后退键  作用于IE、Chrome
		document.onkeydown = forbidBackSpace;
		
		var lastId = null;
		
		function show(id){
			var realId = id.replace("/","");
			$("#"+realId).show();
			if(lastId && lastId!=realId){
				$("#"+lastId).hide();
			}
			lastId = realId;
			//$("#debug").hide();
			debug(id);
		}
		
		var apiList = {
<% for(api in list){%>
"${api.name}":{params:[ <% for(val in api.params){ %>
		{name:"${val.name}",type:"${val.type}"},
	<%}%>],
},
<% } %>      
		};
		
		
		var currentDebug = null;
		

		function debug(api){
			currentDebug = api;
			var data = apiList[api];
		//	$("#"+api.replace("/","")).hide();
			$("#debug_title").html(api);
			$("#tbody").html(build(data.params));
			$("#debug").show();
			$("#json").html("");
		}
		
		
		function build(params){
			var str = "";
			for(var i=0; i < params.length; ++i){
				var p = params[i];
				str += '<tr><td>'+p.name+'</td><td><input dataType="'+p.type+'" type="text" name="'+p.name+'" value="" /></td></tr>';
			}
			return str;
			
		}
		
		$(document).ready(function(){
			
			$("#submit").click(function(){
				var array = {};
				$("#tbody").find("input").each(function(index,a){
					var type = $(a).attr('dataType');
					var orgValue = $(a).val();
					if(type=='int'){
						orgValue = parseInt(orgValue);
					}else if(type=='Integer'){
						orgValue = parseInt(orgValue);
					}
					array[$(a).attr('name')] = orgValue;
				});
				array['_name'] = currentDebug;
				array['_account'] = $("#_account").val();
				array['_pwd'] = $("#_pwd").val();
				$.post("${context}/test/callApi",JSON.stringify(array),function(str){
					var json = JSON.parse(str);
					console.log(json.result);
					$("#json").html(formatJson(json.result));
				});
				console.log(array);
			});
			
		});
		
		// Example usage: http://jsfiddle.net/q2gnX/
		 
		var formatJson = function(json, options) {
			var reg = null,
				formatted = '',
				pad = 0,
				PADDING = '    '; // one can also use '\t' or a different number of spaces
		 
			// optional settings
			options = options || {};
			// remove newline where '{' or '[' follows ':'
			options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
			// use a space after a colon
			options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
		 
			// begin formatting...
			if (typeof json !== 'string') {
				// make sure we start with the JSON as a string
				json = JSON.stringify(json);
			} else {
				// is already a string, so parse and re-stringify in order to remove extra whitespace
				json = JSON.parse(json);
				json = JSON.stringify(json);
			}
		 
			// add newline before and after curly braces
			reg = /([\{\}])/g;
			json = json.replace(reg, '\r\n$1\r\n');
		 
			// add newline before and after square brackets
			reg = /([\[\]])/g;
			json = json.replace(reg, '\r\n$1\r\n');
		 
			// add newline after comma
			reg = /(\,)/g;
			json = json.replace(reg, '$1\r\n');
		 
			// remove multiple newlines
			reg = /(\r\n\r\n)/g;
			json = json.replace(reg, '\r\n');
		 
			// remove newlines before commas
			reg = /\r\n\,/g;
			json = json.replace(reg, ',');
		 
			// optional formatting...
			if (!options.newlineAfterColonIfBeforeBraceOrBracket) {			
				reg = /\:\r\n\{/g;
				json = json.replace(reg, ':{');
				reg = /\:\r\n\[/g;
				json = json.replace(reg, ':[');
			}
			if (options.spaceAfterColon) {			
				reg = /\:/g;
				json = json.replace(reg, ':');
			}
		 
			$.each(json.split('\r\n'), function(index, node) {
				var i = 0,
					indent = 0,
					padding = '';
		 
				if (node.match(/\{$/) || node.match(/\[$/)) {
					indent = 1;
				} else if (node.match(/\}/) || node.match(/\]/)) {
					if (pad !== 0) {
						pad -= 1;
					}
				} else {
					indent = 0;
				}
		 
				for (i = 0; i < pad; i++) {
					padding += PADDING;
				}
		 
				formatted += padding + node + '\r\n';
				pad += indent;
			});
		 
			return formatted;
		};
	</script>




	<div class="panel panel-default" style="width:340px;top:0px;position: fixed;height:90%;">
		<div class="panel-heading" style="position:fixed;width:340px">
			<div class="search-box">
				<input class="form-control" placeholder="api" type="text">
				<button class="btn btn-link search-btn">
					<i class="glyphicon glyphicon-search"></i>
				</button>
			</div>
			结果数量:${count}
		</div>
		<div class="panel-body" style="margin-top:85px;height:100%;overflow:scroll">
			<ul>
				<% for(api in list){%>
				<li><a href="javascript:show('${api.name}')">${api.name}</a></li> 
				<%}%>
			</ul>
		</div>
	</div>

	<div style="margin-left: 360px">
		<% for(api in list){%>
		<div style="display:none" id="${api.id}">
		<h1>
			${api.name} ${api.comment!""}
		</h1>
		是否加密: <% if(api.crypt==3){ %> 是 <% }else{ %> 否<%}%><br>
		参数定义: <% if(api.params.~size==0){ %>无<br><% } else { %>
		<div class="panel panel-default">
			<table class="table" width="100%" class="table">
				<tr>
					<th style="width: 150px">名称</th>
					<th style="width: 100px">类型</th>
					<th>说明</th>
				</tr>
				<% for(val in api.params){ %>
				<tr>
					<td>${val.name}</td>
					<td>${val.type}</td>
					<td>${val.comment!""}</td>
				</tr>
				<%}%>
			</table>
		</div>
		<% } %> 返回数据:${api.returnType} <br/>
		备注:  ${api.remark} <br />
		调用: <a href="reactNative?api=${api.name}" target="_blank" class="button">生成表单</a>
		<% if(api.results!=null &&
		api.results.~size>0){ %>
		<div class="panel panel-default">
			<table class="table" width="100%" class="table">
				<tr>
					<th style="width: 150px">名称</th>
					<th style="width: 100px">类型</th>
					<th>说明</th>
				</tr>
				<% if(api.results!=null){for(val in api.results){ %>
				<tr>
					<td>${val.name}</td>
					<td>${val.type}</td>
					<td>${val.comment}</td>
				</tr>
				<%}}%>
			</table>
		</div>
		<% } %>
		</div>
		<%}%>
	</div>
	

	
	<div class="debugPane" id="debug">
		<hr />
		<div class="panel panel-default">
			<pre>Api.api({
  api:"",
  crypt:3,
  data:data,
  success:(result)=>{
    console.log(result);
    // this.setState(result);
  }
});</pre>
		 

			账号<input type="text" id="_account" value="${account}" />
			密码<input type="text" id="_pwd" value="${pwd}" />
			<table class="table" class="table">
				<tr>
					<th style="width: 150px">名称</th>
					<th>值</th>
				</tr>
				<tbody id="tbody">
				
				</tbody>
				
			</table>
			
			<button id="submit">测试</button>
			<pre id="json">
			
			</pre>
		</div>
	</div>


</body>
</html>